<template>
  <Layout>
      <div v-if="!answerShow" v-show="!answerShow">
          <Card >
              <p slot="title">
                  <span class="headerFont">考试情况汇总</span>
              </p>
              <a href="#" slot="extra">
                  <Button @click="goback" type="error" icon="md-arrow-back" class="add">返回</Button>
              </a>
              <div class="fill_label" :loading="listLoading1">
                  <div>
                      <label>{{ summaryData.candidateNum || 0 }}</label> <p>应考人数</p>
                  </div>
                  <div>
                      <label>{{ summaryData.testedNum || 0 }}</label> <p>已考人数</p>
                  </div>
                  <div>
                      <label>{{ summaryData.unTestedNum || 0 }}</label> <p>未考人数</p>
                  </div>
                  <div>
                      <label>{{ summaryData.examCompletionRate || 0 }}%</label> <p>考试完成率</p>
                  </div>
                  <div>
                      <label>{{ summaryData.averageScore || 0 }}</label> <p>平均成绩(分)</p>
                  </div>
                  <div>
                      <label>{{ summaryData.qualifiedNum || 0 }}</label> <p>合格人数</p>
                  </div>
                  <div>
                      <label>{{ summaryData.unqualified || 0 }}</label> <p>不合格人数</p>
                  </div>
                  <div>
                      <label>{{ summaryData.examPassRate || 0 }}%</label> <p>考试合格率</p>
                  </div>
                  <div>
                      <label>{{ summaryData.excellentNum || 0 }}</label> <p>优秀人数</p>
                  </div>
                  <div style="border-right: none;padding: 2px;">
                      <label>{{ summaryData.examExcellentRate || 0 }}%</label> <p>优秀率</p>
                  </div>
              </div>
          </Card>

          <Card style="margin-top: 10px">
              <p slot="title">
                  <span class="headerFont">考试记录</span>
              </p>
              <a href="#" slot="extra">
                  <Button @click="exportExcel" type="error" icon="md-cloud-download" class="add">导出</Button>
              </a>
              <Form :label-width="90" ref="formInline" :model="formInline">
                  <Row  class="query-form">
                      <Col span="6">
                          <FormItem label="姓名：" prop="userName">
                              <Input v-model="formInline.userName" />
                          </FormItem>
                      </Col>
                      <Col span="6">
                          <FormItem label="考试状态："  prop="resultState">
                              <Select v-model="formInline.resultState" placeholder="请选择考试状态" clearable>
                                  <Option v-for="item in resultStateArr" :key="item.code" :label="item.name" :value="item.code" />
                              </Select>
                          </FormItem>
                      </Col>
                      <Col span="6">
                          <FormItem label="考试结果："  prop="paperResult">
                              <Select v-model="formInline.paperResult" placeholder="请选择考试结果" clearable>
                                  <Option v-for="item in paperResultArr" :key="item.code" :label="item.lable" :value="item.code" />
                              </Select>
                          </FormItem>
                      </Col>
                      <Col span="6">
                          <Button @click="cancel" class="ivu-btn-reset">重置</Button>
                          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                      </Col>
                  </Row>
              </Form>
              <Table ref='table' style="margin-top: 10px" :loading="loading" border :columns="userColumns"
                     :data="userData" width="100%" :height="tableHeight" highlight-row stripe size="small"></Table>
              <Row type="flex" justify="center" style="margin-top: 10px">
                  <i-col>
                      <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                            @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
                  </i-col>
              </Row>
          </Card>
      </div>

      <answer
          v-if="answerShow"
          :show="answerShow"
          :paper="paper"
          @closeAnswer="close"
      />
    </Layout>
</template>

<script>

    import {Api} from '@/api/index.js'
    import qs from "qs";
    import {formatDate} from '@/tools/index'
    import cascaderDom from "../../../../components/cascader-dom.vue"
    import answer from '../answer/answer'
    export default {
        name: "paperUserList",
        components: {cascaderDom,answer},
        props: {
            paperId: {
                type: String,
                default() {
                    return ''
                }
            },
            paperInfo: {
                type: String,
                default() {
                    return ''
                }
            },
            companyName: {
                type: String,
                default() {
                    return ''
                }
            }
        },
        data(){
            return{
                resultStateArr: [{ code: 0, name: '未完成' }, { code: 1, name: '已完成' }],
                paperResultArr: [{ code: '优秀', lable: '优秀' }, { code: '合格', lable: '合格' }, { code: '不合格', lable: '不合格' }],
                loading: true,
                formInline: {
                    userName: ''
                },
                tableHeight: '',
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                userColumns: [
                    {type: 'index', title: '编号', width: 65, align: 'center', fixed: 'left'},
                    {title: '姓名', width: 90, align: 'center', key: 'userName'},
                    {title: '单位', minWidth:160, align: 'center', key: 'orgName'},
                    {title: '账号', align: 'center', minWidth:100,key: 'account'},
                    {title: '手机号', align: 'center', minWidth:120,key: 'phoneNumber'},
                    {title: '考试状态', align: 'center', minWidth:90,key: 'resultState', render:(h,params)=>{
                            return h('div',[ h('span',params.row.resultState === '1'?'已完成':'未完成')]);}},
                    {title: '考试成绩', align: 'center',minWidth:90, key: 'paperResultName', render:(h,params)=>{
                            return h('div',[ h('span',!params.row.paperResultName?'':params.row.paperResult)]);}},
                    {title: '考试结果', align: 'center',minWidth:100, key: 'paperResultName'},
                    {title: '考试开始时间', align: 'center',minWidth:160, key: 'examStartTime',render:(h, params)=> {
                            if (!params.row['examStartTime']) return "";
                            return h('span', formatDate(new Date(params.row['examStartTime']), "yyyy-MM-dd hh:mm:ss"))}},
                    {title: '考试结束时间', align: 'center',minWidth:160, key: 'examEndTime',render:(h, params)=> {
                            if (!params.row['examEndTime']) return "";
                            return h('span', formatDate(new Date(params.row['examEndTime']), "yyyy-MM-dd hh:mm:ss"))}},
                    {title: '考试时长', align: 'center',minWidth:100, key: 'examTime', render:(h,params)=>{
                            return h('div',[ h('span',!params.row.paperResultName?'':params.row.examTime+'(分钟)')]);}},
                    {
                        title: '操作',
                        align: 'center',
                        key: 'view',
                        fixed: 'right',
                        width: 80,
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.resultState==='0'? '#d0d0d0':'red' ,
                                        pointerEvents: params.row.resultState ==='0'? 'none' : ''

                                    },
                                    on: {
                                        click: () => {
                                            this.paper.paperId = this.paperId
                                            this.paper.paperResultId = params.row.paperResultId
                                            this.paper.paperInfo = this.paperInfo
                                            this.paper.paperResult = params.row.paperResult
                                            this.answerShow = true
                                        }
                                    }
                                }, '查看')
                            ]);
                        }
                    }
                ],
                userData: [],
                summaryData:{},
                listLoading1:false,
                answerShow:false,
                paper:{}
            }
        },
        mounted(){
            this.tableHeight = window.innerHeight*0.85 - this.$refs.table.$el.offsetTop-70;
            this.query();
            this.getExamSummary()
        },
        methods: {
            getExamSummary(){
                this.listLoading1 = true
                this.$http.get(Api.paper+'/paperExamSummary/'+this.paperId).then((res) => {
                    this.summaryData = res.data.data;
                    this.listLoading1 = false
                }).catch( e => {
                    this.listLoading1 = false
                });
            },
            query(){
                this.loading = true;
                let data = {
                    page: this.pagedata.currentPage,
                    rows: this.pagedata.pageSize,
                    paperId: this.paperId
                };
                data = Object.assign(data,JSON.parse(JSON.stringify(this.formInline)));
                this.$http.get(Api.paper+'/getPaperResultRecordPageList',{
                    params:data,
                    paramsSerializer: params => {
                        return qs.stringify(params, { indices: false })
                    }
                }).then((res) => {
                    this.userData = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                    this.loading = false;
                }).catch( e => {
                    this.$Message.error('请求失败');
                });
            },
            exportExcel() {
                this.$http.get(Api.paper+'/exportPaperResult/'+this.paperId, {
                    params: this.formInline,
                    paramsSerializer: params => {
                        return qs.stringify(params, { indices: false })
                    },
                    responseType: 'blob'      //告诉服务器我们需要的响应格式
                }).then(res => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = this.companyName + ' (' + this.paperInfo + ')考试记录.xlsx'
                    aLink.click()
                    document.body.appendChild(aLink)
                }).catch((e) => {
                    console.log(e)
                })
            },
            close() {
                this.paper = {}
                this.answerShow = false
            },
            pageSizeChange(pageSize){
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            pageChange(pageNum){
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            cancel(){
                this.formInline = {};
                this.query();
                this.$refs.queryOrgCascader.resetCurrentOrg();
            },
            setOrgId1(data) {
                this.formInline.companyId = data[data.length - 1];
            },
            setOrgName1(data) {
                this.formInline.companyName = data;
            },
            goback(){
                this.$emit('close')
            }
        }
    }
</script>

<style scoped lang="less">
    .headerFont {
        font-size: 16px;
        font-weight: bolder;
        color: #606266;
    }

    .fill_label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
    div {
        text-align: center;
        padding: 2px 30px 0 0;
    label {
        color: #3D90FF;
        font-size: 20px;
    }
    p {
        font-size: 12px;
        font-weight: bold;
        margin: 10px 0 0;
        color: #776b6b;
    }
    border-right: 1px solid #eff2f6;
    }
    div:first-child {
        border-left: 0;
    }
    }
</style>
